iT邦幫忙

2019 iT 邦幫忙鐵人賽

0
自我挑戰組

前端工程師的30份套餐系列 第 30

React 生命週期(Life Cycle)

  • 分享至 

  • xImage
  •  

從圖中可以清楚了解整個React元件生命週期的觸發時間點
https://ithelp.ithome.com.tw/upload/images/20181203/20112494N2SZZRYeMV.png

元件執行生命週期方法可分為三種

  1. Mounting:會在元件建立時被執行
    • constructor()
      上一篇有稍微提到,這是es6的class語法糖,建構並初始化物件
    • componentWillMount()
      緊接在costructor後執行componentWillMount,只會在初始執行一次
    • render()
      執行setState和更新父元件所傳遞的props,都會執行render()。
    • componentDidMount()
      會在render執行完成後調用,這應該是最常用到的生命週期,像是綁定DOM事件、執行ajax,多半會在這裡使用。另外,若在這裡使用setState會使render執行兩次。
  2. Update
    • componentWillReceiveProps
      當元件接受到新的(更新)props時,會被執行,如果需要在props變更時改變state狀態,就可以在這處理。
    • componentWillUpdate(nextProps,nextState):17版將棄用
    • render()
    • componentDidUpdate(prevProps,prevState,snapshot)
      Update階段最後一個執行的方法,在畫面渲染更新後調用,通常在這裡處理call api或是setState,但要記得判斷時機(建議加入判斷式),否則會進入無限迴圈。
  3. Unmounting:移除的時候會執行
    • componentWillUnmount()
      當component將要從DOM被移除前會執行這個方法,在 componentDidMount()方法做的設定,如果需要被終止或移除,就需要在這方法執行。

另外,要注意不能使用setState的方法有:

  • render
  • componentWillMount
  • componentWillUpdate

如果是新手光看文件是不夠的,記得動動手練習才是真正的認識這些「朋友」!

以上如果有錯誤,歡迎大家不吝指教,感謝!
/images/emoticon/emoticon08.gif


上一篇
React的props與state
系列文
前端工程師的30份套餐30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
Ivan
iT邦新手 2 級 ‧ 2018-12-05 19:28:22

這是v15的生命週期,可以補充介紹v16版的生命週期嗎~ 恭喜完成30篇!

我要留言

立即登入留言